<template>
    <div id="home">
        <TmallNavBar>
            <template #default>移动端之vite js框架</template>
        </TmallNavBar>


        <!-- 搜索框 -->
        <div class="search">
            <div class="input" @click="$router.push('/goodsSearch')">
                <span class="icon-search iconfont icon-sousuo">搜索商品</span>
            </div>
        </div>

        <div class="wrapper">
            <div>
                <!-- 骨架屏 -->
                <van-skeleton v-if="isLoading">
                    <template #template>
                        <div class="skeleton">
                            <div class="skeleton-image-box">
                                <van-skeleton-image class="skeleton-image"/>
                            </div>

                            <div class="skeleton-category">
                                <div class="skeleton-category-item" v-for="(item) in 10" :key="item">
                                    <van-skeleton-image image-size="60"/>
                                    <van-skeleton-paragraph />
                                </div>
                            </div>

                            <div class="skeleton-recommand">
                                <div class="skeleton-recommand-item" v-for="(item) in 20" :key="item">
                                    <van-skeleton-paragraph row-width="40%"/>
                                    <div class="skeleton-recommand-item-image-box">
                                        <van-skeleton-image class="skeleton-recommand-item-image"/>
                                        <van-skeleton-image class="skeleton-recommand-item-image"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </van-skeleton>


                <div v-else>
                    <!-- 轮播图列表 -->
                    <TmallSwiper :banners="bannerList"/>

                    <!-- 热门分类组件 -->
                    <CategoryPanel :hotCategories="hotCategoryList"/>

                    <!-- 推荐组件 -->
                    <RecommendPanel :recommends="recommendList"/>

                    <!-- 猜你喜欢组件 -->
                    <TmallGuess ref="guessRef"/>
                </div>
            </div>
        </div>

        <!-- 返回顶部组件 -->
        <TmallBackTop @backTop="backTop" :isShowBackTop="isShowBackTop" />
        <!-- 返回顶部组件 -->
    </div>
</template>
  
<script setup>
import { ref, onMounted, reactive } from 'vue'
import BScroll from 'better-scroll'
import { reqGetHomeDataAPI, reqGetHomeRecommendAPI } from "@/apis/home"

// 导入热门分类组件
import CategoryPanel from '@/views/Home/Components/CategoryPanel.vue'

// 导入推荐组件
import RecommendPanel from '@/views/Home/Components/RecommendPanel.vue'








// ----------------------- 返回顶部开始 -----------------------
const backTop = () => {
    bscroll.scrollTo(0, 0, 500);
}
// ----------------------- 返回顶部结束 -----------------------





// ----------------------- 获取数据开始 -----------------------
// 轮播图列表
const bannerList = ref([])

// 热门分类列表
const hotCategoryList = ref([])

// 推荐列表
const recommendList = ref([])

// 获取首页数据
const getHomeData = async () => {
  const result = await reqGetHomeDataAPI(10)
  bannerList.value = result.data.banners != null ? result.data.banners : []
  hotCategoryList.value = result.data.hot_categories != null ? result.data.hot_categories : []
}

// 获取首页推荐
const getHomeRecommend = async () => {
  const result = await reqGetHomeRecommendAPI(8)
  recommendList.value = result.data.recommends != null ? result.data.recommends : []
}
// ----------------------- 获取数据结束 -----------------------

let bscroll = reactive({})

// 是否显示返回顶部按钮
const isShowBackTop = ref(false)

const isLoading = ref(true)

onMounted(async() => {
    isLoading.value = true
    // 获取首页数据、获取首页推荐
    await Promise.all([getHomeData(), getHomeRecommend()])

    isLoading.value = false

    bscroll = new BScroll(document.querySelector('.wrapper'), {
        probeType: 3,
        click: true,
        pullUpLoad:true,
        pullDownRefresh: true, //开启下拉刷新
    })

    // 猜你喜欢加载
    bscroll.on('pullingUp', pullingUpHandler)

    //监听下拉刷新
    bscroll.on("pullingDown", pullingDownHandler)

    // 监听滚动
    bscroll.on('scroll',(position) => {
        isShowBackTop.value = -position.y > 70;
    });
})




// ----------------------- 猜你喜欢加载更多开始 -----------------------
const guessRef = ref()
const pullingUpHandler = () => {
    guessRef.value.getHomeGoodsGuess()
    bscroll.finishPullUp()
    bscroll.refresh()
}
// ----------------------- 猜你喜欢加载更多结束 -----------------------





// -----------------------  下拉刷新功能开始 --------------------------
const pullingDownHandler = async () => {
    console.log('------------ 下拉刷新 -------------');
    // 重置猜你喜欢数据
    guessRef.value?.resetData()

    // 同时请求
    await Promise.all([getHomeData(), getHomeRecommend(), guessRef.value.getHomeGoodsGuess()])

    bscroll.finishPullDown()
}
// -----------------------  下拉刷新功能结束 --------------------------


</script>

<style scoped lang="scss">
// 骨架屏
.skeleton {
    display: flex;
    flex-direction: column;
    .skeleton-image-box {
        width: 100%;
        height: 170px;
        margin-bottom: 15px;
        .skeleton-image {
            width: 100%;
            height: 100%;
        }
    }
    .skeleton-category {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .skeleton-category-item {
            width: 20%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 5px;
        }
    }
    .skeleton-recommand {
        display: flex;
        flex-wrap: wrap;
        min-height: 254px;
        border-radius: 5px;
        .skeleton-recommand-item {
            display: flex;
            flex-direction: column;
            width: 50%;
            height: 127px;
            margin-bottom: 15px;
            .skeleton-recommand-item-image-box {
                display: flex;
                margin-top: 15px;
                // flex-direction: row;
                .skeleton-recommand-item-image {
                    margin-right: 10px;
                }
            }
        }
    }
}

// 搜索商品盒子
.search {
    margin-top: 45px;
    padding: 10px;
    background-color: #27BA9B;
    border-bottom: 1px solid gainsboro;
    position:fixed;
    width: 100%;
    z-index: 100;
    .input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32px;
      padding-left: 13px;
      color: #8b8b8b;
      font-size: 14px;
      border-radius: 16px;
      background-color: #f3f4f4;
      margin-top: 5px;
    }
  }
  .icon-search {
    &::before {
      margin-right: 5px;
    }
  }

banners img{
    width: 100%;
    height: 50%;
}

#home {
    height: 100vh;
    position:relative;
    background: ghostwhite;
}
.wrapper {
    position: absolute;
    top:100px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
}
</style>
  